<template>
	<view>
		<view class="bg-linear-gradient pt-2">
			<!-- <view class="text-center pt-2 pb-2 font-14 text-white">游客端</view> -->
			<view class="p-2 ">
				<u-swiper height="300" :list="list"></u-swiper>
			</view>
		</view>
		<u-notice-bar style="border: 1px solid #8ED0F2; margin: 10px;" color="#8ED0F2" bg-color="#fff"
			border-radius="10" :more-icon="true" class="pl-2 pr-2" mode="vertical" :is-circular="false" :list="notices"
			@click="gitMin('touristMode/index/NewList')"></u-notice-bar>

		<view class="dfex pl-2 pr-2 mt-5">
			<view style="text-align: center;" v-for="(item, index) in CatList" :key="index" @click="open(item.url)">
				<i v-if="item.icon" class="text-white bg-FFC251 p-2 font rounded-circle  iconfont"
					v-html="item.icon"></i>
				<view class="mt-4 font-14" style="width: 60px; lineHights">{{item.text}}</view>
			</view>
		</view>
		<view class="pl-2 pr-2 mt-8">
			<view class="dfex">
				<view class="dfes">
					<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
					<text class="pl-1 font-16 text-101010 font_family">当季产品信息</text>
				</view>
				<view @click="gitMin('touristMode/seasonal/seasonal')">
					<text class="font-14 text-999999">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
			</view>
			<view class="dfex u-line pb-2 mb-2 mt-3" v-for="(item, index) in nenoList" :key="index"
				@click="jump(item.id)">
				<view>
					<text class="text-333333 font-14">{{item.productName || '-'}}</text>
					<view class="mt-2 lineHights font-12 text-999999">
						<view class="wrapa">产品品类：{{ item.productTypeName || '-' }}</view>
						<view class="wrapa">基地名称：{{ item.baseName || '-' }}</view>
					</view>
				</view>
				<view class="bg-78AB06 pl-2 pr-2 py-1 rounded-circle font-12 text-white">查看详情</view>
			</view>
			<view class="text-center" v-if="nenoList.length === 0">
				<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
				<view class="text-999999 font-15">暂时木有内容呀~~</view>
			</view>
		</view>
		<view class=" pl-2 pr-2 mt-8">
			<view class="dfex">
				<view class="dfes">
					<text class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"></text>
					<text class="pl-1 font-16 text-101010 font_family">黑名单</text>
				</view>
				<view @click="gitMin('touristMode/Blacklist/Blacklist')">
					<text class="font-14 text-999999">查看全部</text>
					<text class="iconfont icon-youyou- text-999999 font-16"></text>
				</view>
			</view>
			<view class="dfex mt-2" v-for="(item, itemIndex) in tabContents.slice(0, 3)" :key="itemIndex"
				@click="getDiClick(item.id)">
				<view class="dfes">
					<view
						:class="['pr-2 font-20', {'index-color-1': (itemIndex % 3) === 0 && itemIndex < 3, 'index-color-2': (itemIndex % 3) === 1 && itemIndex < 3, 'index-color-3': (itemIndex % 3) === 2 && itemIndex < 3, 'font-color-gray': itemIndex >= 3 }]">
						{{ itemIndex + 1 }}
					</view>
					<u-image style="width: 35px; height: 35px; margin-top: 10rpx;" border-radius="100rpx"
						:src="getFullImageUrl(item.avatar)"></u-image>
					<view class="ml-2 font-14 text-333333 wrap">{{item.enterpriseName}}</view>
				</view>
				<view class="text-78AB06 font-16">{{item.totalIntegral}} 积分</view>
			</view>
		</view>
	<!-- 	<view @click="gitMin('login/login')" class="fixed-bottomRi bg-success font-14 p-2  text-white  rounded-circle"
			style="opacity: 0.7;">登录</view> -->
			<view @click="showModal" class="fixed-bottomRi bg-success font-14 p-2  text-white  rounded-circle"
				style="opacity: 0.7;">登录</view>

		<view v-if="isModalVisible" class="modal-overlay" @click="hideModal">
			<view class="modal" @click.stop>
				<view class="modal-content lineHight-3 font-15 text-center">
					<view @click="gitMin('login/login')">涉农端</view>
					<view class="border-r" @click="openLocation('https://yzsy.yzppxh.com/#/')">上游端</view>
					<view @click="openLocation('https://yzxy.yzppxh.com/#/')">下游端</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				list: [
					'/static/banner.png',
				],
				notices: [],
				CatList: [{
						icon: '&#xe655;',
						text: '品牌码查询',
						url: '/pages/touristMode/query/query',
					},
					{
						icon: '&#xe62d;',
						text: '涉农主体注册',
						url: '/pages/touristMode/Agriculture/Agriculture',
					},
					{
						icon: '&#xe650;',
						text: '上游服务商注册',
						url: '/pages/touristMode/upstream/upstream',
					},
					{
						icon: '&#xe636;',
						text: '下游服务商注册',
						url: '/pages/touristMode/downstream/downstream',
					}
				],
				loading: true,
				tabContents: [],
				nenoList: [],
				isModalVisible: false

			}
		},
		onLoad() {
			this.NewHid();
			this.blackList();
			this.getProductsList()
		},

		methods: {
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			NewHid() {
				$H.get('/basisInform/platformNotice/visitor/list', {}, {
					token: false
				}).then(res => {
					this.notices = res.result.records.map(item => item.title);
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				}).finally(() => {
					// 请求完成后隐藏加载动画
					this.loading = false;
				});
			},
			//当季产品
			getProductsList() {
				$H.get(
					`/agriculture/seasonalProducts/visitor/list`, {}, {
						token: false
					}
				).then((res) => {
					console.log(res)
					this.nenoList = res.result.records || []
					if (res.result.records && res.result.records.length > 2) {
						this.nenoList = res.result.records.slice(0, 2)
					}
				})
			},
			//黑名单
			blackList() {
				$H.get('/agriculture/blacklist/visitor/list', {}, {
					token: false
				}).then(res => {
					this.tabContents = res.result.records
				}).catch(error => {
					console.log(error)
				});
			},

			open(url) {
				uni.navigateTo({
					url: url
				});
			},
			openLocation(url) {
				 window.location.href = url;
			},
			gitMin(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
			jump(id) {
				uni.navigateTo({
					url: "/pages/touristMode/seasonal/seasonalDliest?id=" + id,
				});
			},
			getDiClick(id) {
				uni.navigateTo({
					url: "/pages/touristMode/Blacklist/blacklistDi?id=" + id,
				});
			},
			showModal() {
				this.isModalVisible = true;
			},
			hideModal() {
				this.isModalVisible = false;
			}

		}
	}
</script>

<style scoped>
	.loading-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 10px 20px;
		border-radius: 10px;
	}

	.loading-text {
		font-size: 14px;
	}

	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #FFC251;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #FFC251;
	}

	.index-color-1 {
		font-size: 22px;
		color: #FF0000;
	}

	.index-color-2 {
		font-size: 22px;
		color: #17a2b8;
	}

	.index-color-3 {
		font-size: 22px;
		color: #FFC251;
	}

	.lazy-load img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 或者其他你需要的填充方式，比如 contain */
	}


	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 999;
	}

	.modal {
		position: absolute;
		width: 25%;
		height: 150px;
		bottom: 15%;
		border-top-left-radius:5px;
		border-bottom-left-radius:5px;
		background-color: white;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
	}

	.modal-content {
		margin-top: 10px;
	}

	.modal-overlay .modal {
		transform: translateX(0);
	}
	.border-r{
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
	}
</style>